import { useState } from "react";
import { Switch, Modal } from "antd";
import { OnOffDesc } from "@/components/render";
import { SelectTag } from "@/components/func";

const QrCustomerTag = ({ customerTag, setCustomerTag }: any) => {
  const [isLimit, setIsLimit] = useState(false);
  const [visible, setVisible] = useState(false);

  return (
    <div className="flex mb-24">
      <span className="w-106 text-right mr-16">客户标签:</span>
      {/* 开关 */}
      <div>
        <div className="flex items-center mb-12">
          <Switch
            size="small"
            onChange={e => {
              setIsLimit(e);
            }}
            checked={isLimit}
          />
          <OnOffDesc flag={isLimit} />
        </div>
        {/* 标签操作 */}
        <div className={`${isLimit ? "" : "none"}`}>
          <div className="flex items-center flex-wrap">
            {/* 添加标签 */}

            <div
              className="h-28 flex items-center justify-center cursor-pointer select-none text-blue-default rounded-sm mr-12 mb-8 border-1 border-blue-default border-solid px-6"
              onClick={() => {
                setVisible(true);
              }}>
              + 添加标签
            </div>

            {/* 选择的标签 */}
            {customerTag.map((item: any, index: number) => {
              return (
                <div
                  className="h-28 flex items-center justify-center cursor-pointer select-none text-grey-600 rounded-sm mr-12 mb-8 border-1 border-grey-300 border-solid px-6"
                  key={item.id}>
                  {item.name || item.stage_name}
                  <span
                    className="cursor-pointer ml-4"
                    onClick={() => {
                      setCustomerTag(
                        customerTag.filter((TagItem: any) => TagItem.id !== item.id)
                      );
                    }}>
                    <i className="iconfont icon-chuyidong text-grey-300 text-xs"></i>
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <Modal
        closable={false}
        maskClosable={false}
        visible={visible}
        width={634}
        footer={null}
        onCancel={() => {
          setVisible(false);
        }}>
        <SelectTag
          setVisible={setVisible}
          customerTag={customerTag}
          setCustomerTag={setCustomerTag}
        />
      </Modal>
    </div>
  );
};

export default QrCustomerTag;
